<template>
  <view class="search-bar" :class="{ 'search-bar--focused': focused }">
    <!-- 搜索输入框 -->
    <view class="search-bar__input-wrapper">
      <view class="search-bar__icon">
        <u-icon name="search" size="32rpx" :color="iconColor"></u-icon>
      </view>
      
      <input 
        v-model="inputValue"
        class="search-bar__input"
        type="text"
        :placeholder="placeholder"
        :placeholder-style="placeholderStyle"
        :disabled="disabled"
        :maxlength="maxlength"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @confirm="handleConfirm"
      />
      
      <!-- 清除按钮 -->
      <view 
        v-if="showClear && inputValue && !disabled" 
        class="search-bar__clear"
        @click="handleClear"
      >
        <u-icon name="close-circle-fill" size="32rpx" color="#ccc"></u-icon>
      </view>
    </view>
    
    <!-- 搜索按钮 -->
    <view 
      v-if="showSearchButton" 
      class="search-bar__button"
      :class="{ 'search-bar__button--disabled': disabled }"
      @click="handleSearch"
    >
      <text class="search-bar__button-text">{{ searchButtonText }}</text>
    </view>
    
    <!-- 取消按钮 -->
    <view 
      v-if="showCancel && focused" 
      class="search-bar__cancel"
      @click="handleCancel"
    >
      <text class="search-bar__cancel-text">{{ cancelText }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

interface Props {
  // 绑定值
  modelValue?: string
  // 占位符
  placeholder?: string
  // 是否禁用
  disabled?: boolean
  // 最大长度
  maxlength?: number
  // 是否显示清除按钮
  showClear?: boolean
  // 是否显示搜索按钮
  showSearchButton?: boolean
  // 搜索按钮文本
  searchButtonText?: string
  // 是否显示取消按钮
  showCancel?: boolean
  // 取消按钮文本
  cancelText?: string
  // 是否自动搜索（输入时触发）
  autoSearch?: boolean
  // 自动搜索延迟（毫秒）
  searchDelay?: number
  // 背景色
  background?: string
  // 圆角大小
  radius?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  placeholder: '请输入搜索关键词',
  disabled: false,
  maxlength: 100,
  showClear: true,
  showSearchButton: false,
  searchButtonText: '搜索',
  showCancel: false,
  cancelText: '取消',
  autoSearch: false,
  searchDelay: 500,
  background: 'var(--search-bg-color, #f8f9fa)',
  radius: '24rpx'
})

interface Emits {
  'update:modelValue': [value: string]
  search: [value: string]
  focus: [event: Event]
  blur: [event: Event]
  clear: []
  cancel: []
  input: [value: string]
}

const emit = defineEmits<Emits>()

// 响应式数据
const inputValue = ref(props.modelValue)
const focused = ref(false)
let searchTimer: NodeJS.Timeout | null = null

// 计算属性
const iconColor = computed(() => {
  return focused.value ? 'var(--primary-color, #007AFF)' : '#999999'
})

const placeholderStyle = computed(() => {
  return `color: var(--placeholder-color, #999999); font-size: 28rpx;`
})

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  inputValue.value = newValue
})

// 监听输入值变化
watch(inputValue, (newValue) => {
  emit('update:modelValue', newValue)
  
  // 自动搜索
  if (props.autoSearch) {
    if (searchTimer) {
      clearTimeout(searchTimer)
    }
    searchTimer = setTimeout(() => {
      emit('search', newValue)
    }, props.searchDelay)
  }
})

// 事件处理
const handleInput = (event: any) => {
  const value = event.detail.value
  inputValue.value = value
  emit('input', value)
}

const handleFocus = (event: Event) => {
  focused.value = true
  emit('focus', event)
}

const handleBlur = (event: Event) => {
  focused.value = false
  emit('blur', event)
}

const handleConfirm = () => {
  handleSearch()
}

const handleSearch = () => {
  if (props.disabled) return
  emit('search', inputValue.value)
}

const handleClear = () => {
  inputValue.value = ''
  emit('clear')
  
  // 清除后自动搜索
  if (props.autoSearch) {
    emit('search', '')
  }
}

const handleCancel = () => {
  inputValue.value = ''
  focused.value = false
  emit('cancel')
}
</script>

<style lang="scss" scoped>
.search-bar {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx;
  transition: all 0.3s ease;
}

.search-bar__input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: v-bind(background);
  border-radius: v-bind(radius);
  padding: 0 24rpx;
  height: 72rpx;
  transition: all 0.3s ease;
  
  .search-bar--focused & {
    background: var(--card-bg-color, #ffffff);
    box-shadow: 0 0 0 2rpx var(--primary-color, #007AFF);
  }
}

.search-bar__icon {
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.search-bar__input {
  flex: 1;
  font-size: 28rpx;
  color: var(--text-color, #333333);
  background: transparent;
  border: none;
  outline: none;
  
  &::placeholder {
    color: var(--placeholder-color, #999999);
  }
  
  &:disabled {
    color: var(--text-color-disabled, #cccccc);
  }
}

.search-bar__clear {
  margin-left: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  transition: all 0.2s ease;
  
  &:active {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(0.9);
  }
}

.search-bar__button {
  padding: 0 32rpx;
  height: 72rpx;
  background: var(--primary-color, #007AFF);
  border-radius: v-bind(radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  
  &:active {
    background: var(--primary-color-dark, #0056CC);
    transform: scale(0.98);
  }
  
  &--disabled {
    background: var(--bg-color, #e9ecef);
    
    &:active {
      transform: none;
    }
    
    .search-bar__button-text {
      color: var(--text-color-disabled, #cccccc);
    }
  }
}

.search-bar__button-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
}

.search-bar__cancel {
  padding: 0 16rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  
  &:active {
    opacity: 0.6;
  }
}

.search-bar__cancel-text {
  font-size: 28rpx;
  color: var(--text-color-secondary, #666666);
}

// 响应式设计
@media (max-width: 750rpx) {
  .search-bar {
    padding: 12rpx;
  }
  
  .search-bar__input-wrapper {
    height: 64rpx;
    padding: 0 20rpx;
  }
  
  .search-bar__input {
    font-size: 26rpx;
  }
  
  .search-bar__button {
    height: 64rpx;
    padding: 0 24rpx;
  }
  
  .search-bar__button-text {
    font-size: 26rpx;
  }
}

// 暗色主题适配
[data-theme='dark'] {
  .search-bar {
    --search-bg-color: #2c2c2e;
    --card-bg-color: #1c1c1e;
    --text-color: #ffffff;
    --text-color-secondary: #8e8e93;
    --text-color-disabled: #636366;
    --placeholder-color: #636366;
    --bg-color: #3a3a3c;
    --primary-color-dark: #0A84FF;
  }
}
</style>